<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!-- 引入到网页中

    相对路径：
        当前文件 所在 目录  下面的  XXX

        例如：css/login.css 代表：
            css文件夹 下面的  login.css 文件


    <link rel="stylesheet" href="css/login.css" />

    -->

    <link rel="stylesheet" href="css/login.css" />


</head>
<body>

<!-- html 的标签：  盖房子的 骨架  -->
<!-- CSS：         修饰页面： 颜色、位置、大小、背景等  -->



<!-- 整个内容都居中


class="box" 代表将 box 样式作用在这个盒子上
  -->

<div class="box">
    <h3 class="login-title">登录</h3>

    <!-- span 存储文字更恰当些 -->
    <span class="login-reg">
        还没有洋店帐号？

        <!-- 超级链接 -->
        <a href="#" class="login-reg-a">30秒注册 </a>
    </span>

    <!-- 加上一堵墙，用于去掉上面浮动代码对下面的影响 -->
    <div class="clearfix"></div>

    <p>
        <!-- type="text" password submit    html 规定的语言
        id="u" 相当于起了1个名字叫做u
        -->
        <span class="label">用户名：</span><input type="text" id="u"/>
    </p>


    <p>
        <span class="label">密码： </span><input type="password" id="p" />
    </p>

    <p>
        <!-- 将 btn-login 作用在当前按钮上 -->
        <input type="submit" value="登录" class="btn-login" id="btn"/>
    </p>
</div>

</body>
</html>



<!-- 1. 引入jQuery文件：  1个js库文件，免费开源的，提供了： 动画，绑定，数据等非常丰富的接口，全球访问量前500的网站中，有80%都使用了这个库 -->

<!--
引入css

<link ref="stylesheet" href="css/login.css" />


引入js
<script src="js/jquery.js"></script>

js/jquery.js 相对路径， 相对于 当前html来说的路径

https://www.baidu.com/img/bd_logo1.png
绝对路径： 只要能找到文件，不需要参考某个文件的位置


区别：
	绝对路径： 以  http 开头
	相对路径： 以文件夹或文件名开头
-->

<!-- 1. 引入jQuery文件：-->
<script src="js/jquery.js"></script>


<!-- 2. 使用jQuery文件-->
<script>







// 为了找到按钮，所以需要给按钮添加id

// $("#btn")
// 【注意】 # 不能省，代表找id的元素
//  click 鼠标单击
//     function() {}   代表1个功能，是1个固定格式，相当于点击按钮，执行这里面的代码

//  将代码放在最后，就不会出现绑定不了的情况
$("#btn").click(function() {
	
	
	
	// 目的： 获取用户名和密码，【然后将它们传递给服务器】
	//  获取用户名
	//   $("#u") 代表找到id为u的元素
	//    .val() 代表取出输入框元素中的内容
	//  var 代表 js定义变量（空间）
	// 【注意】 取值的位置 要放在 点击处理函数中
	var username = $("#u").val()
	
	// 取出密码
	var password = $("#p").val()
	
	// username = encodeURIComponent(encodeURIComponent(username));
	
	
	// 【挑战】 同时将 用户名 和【 密码】 传递给我们的服务器

	// ajax 将用户名 和 密码 传递给我们的服务器
	//  ajax 也是jQuery提供的功能： 发送一个请求给服务器
	//  数据：  {} 代表数据整体的意思： 对象
	$.ajax({
		// 【注意】 url,data,success 不能改的，多个参数之间用 , 隔开 这是个固定格式
		url: "servlet/LoginServlet",           // 服务器处理请求的地址, 登录的接口地址  servlet/LoginServlet
		data: {				// 发送给服务器的数据，data不能变
			u: username,      //  u 代表字段的名字，服务器根据这个名字来取值； username 就是字段的值，是1个变量值
			p: password
		},
		success: function(str) {               // 数据成功从服务器返回之后，会自动执行 这里的代码。称为回调函数
			alert(str)
		}
	})
	
	
	
	// 弹框显示变量 username 的值
	// \n 代表换行的意思
	// 弹框显示变量 password 的值
	// alert(username + "\n" + password)
	
	// alert("我是一个弹框")	
})




// $("#u") 代表找到 id为u的元素
//    val jQuery提供的1个功能，用于设置输入框中的内容
// $("#u").val("张三")

</script>
























